
<script setup lang="ts">
import { ref } from 'vue';
import type{ Ref } from 'vue';
const images:Ref<string[]> = ref([]);  // 用来存储上传的图片路径

function onClickLeft() {
    history.back();
}
/**
function afterRead(file: any) {
    console.log('上传', file);
    // 获取上传的文件对象，假设文件是图片类型
    const fileUrl = URL.createObjectURL(file.file);  // 创建一个临时URL
    images.value.push((fileUrl));  // 将图片URL存入数组
}*/
function afterRead(file: any) {
    console.log('上传', file);

    // 将 Blob 文件转换为 Base64
    const reader = new FileReader();
    reader.onloadend = () => {
        const base64Image = reader.result as string;
        images.value.push(base64Image);  // 将Base64字符串存入数组
    };
    reader.readAsDataURL(file.file);  // 使用 FileReader 将文件转为 Base64
}
function submit() {
    console.log(images.value);  // 已提交的作业图片列表数组
    getWork({ content: images.value }).then(res => {
        console.log(235, res.data.content.content);  // 数组
        
        if (res.code == 200) {
            showToast(res.message);
            localStorage.setItem('作业', JSON.stringify(images.value));  // 保存为Base64字符串
            console.log(666645, images.value);
        }

        // 清空输入上传文件
        images.value = [];
    });
}


//作业列表
import { getWork } from '@/api/user';
import { showToast } from 'vant';


/**function submit(){
    //提交上传作业
    console.log(images.value);//已提交的作业图片列表数组
    getWork({content:images.value}).then(res=>{
        console.log(235,res.data.content.content);//数组
       
        if(res.code==200){
            showToast(res.message)
        
            localStorage.setItem('作业',JSON.stringify(images.value))
            console.log(666645,images.value);//键值对
            
        }
        
        //清空输入上传问价in
        images.value=[]
    })
}*/
</script>

<template>
    <div>
        <!-- 课程详情简介-添加作业 -->
        <van-nav-bar title="" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-cell title="添加你的作业" value="" />
        <van-divider />

        <!-- 显示上传的图片 -->
        <div v-if="images.length > 0">
            <h3>上传的作业图片：</h3>
            <div class="image-gallery">
                <div v-for="(image, index) in images" :key="index" class="image-item">
                    <img :src="image" alt="Uploaded Image" class="uploaded-image" />
                </div>
            </div>
        </div>
        <div class="bottom">
            <van-uploader :after-read="afterRead">
                <van-button icon="plus" type="primary">上传文件</van-button>
            </van-uploader>
            <van-button type="primary" @click="submit">提交作业</van-button>
        </div>

    </div>
</template>

<style lang="scss" scoped>
.bottom{
    display: flex;
    justify-content: space-evenly;
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100vw;
    align-items: center;
    height: 40px;
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 5vw;
}

.image-item {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uploaded-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>
